<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
  <div sec:authorize="isAuthenticated()">
	  This content is only shown to authenticated users.
	</div>
	<div sec:authorize="hasRole('ROLE_ADMIN')">
	  This content is only shown to administrators.
	</div>
	<div sec:authorize="hasRole('ROLE_USER')">
	  This content is only shown to users.
	</div>
  <span th:text="${#authorize}"></span>
  <div>
    <form id="wiselyForm">
	  <textarea rows="4" cols="60" id="message" name="message"></textarea>
	  <input type="submit" value="submit">
    </form>
    <div id="output"></div>
    <a th:href="@{/logout}">退出</a>
  </div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/sockjs.min.js}"></script>
<script type="text/javascript" th:src="@{/js/stomp.min.js}"></script>
<script th:inline="javascript">
  $(function(){
	  var socket = new SockJS("/endpointChat");
	  var stompClient = Stomp.over(socket);
	  stompClient.connect('guest', 'guest',function(fram){
		  console.log("开始连接!");
		  stompClient.subscribe("/user/queue/notifications",handleNotification);
	  });
	  
	  $("#wiselyForm").submit(function(e){
		  e.preventDefault();
		  var message = $('#message').val();
		  sendmessage(message);
	  });
	  function handleNotification(message) {
	      location.href="/login";  
		  //$('#output').append("<b>Received: " + message.body + "</b><br/>")
	  }
	  function sendmessage(message){
		        stompClient.send("/chat", {}, message);//5
	  };
	 
  });
</script>
</body>
</html>